<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/master">
<body layout:fragment="content" class="bgwh">
<div th:replace="layout/layout::center_zy_search_top_box('我的账户')"></div>
<script src="/js/layer/layer.js"></script>
<script src="/js/laydate/laydate.js"></script>
<div class="zy_module-content">
    <div class="vip_user_info_mima vip_user_info_person">
        <form>
            <div class="jiben">
                <div class="headup">
                    <span>头像上传</span>
                    <section class="aui-text-center">
                        <span th:utext="${head}"></span>
                        <span id="btn">点击设置头像</span>
                    </section>
                    <!--图片裁剪-->
                    <div class="clipbg displaynone">
                        <div id="clipArea"></div>
                        <div class="loading displaynone">正在载入图片...</div>
                        <div class="footer">
                            <dl>
                                <dd style="background: #fe1041; color: #ffffff;border: none;">打开相册
                                    <input type="file" id="file" accept="image/*">
                                </dd>
                                <dd id="clipBtn">完成裁剪</dd>
                            </dl>
                            <div class="back">取消</div>
                        </div>
                    </div>
                </div>
                <div><span>用户昵称</span><input type="text" id="nickName" th:value="${data.nickName}"></div>
                <div>
                    <span>出生日期</span>
                    <label><input type="text" th:value="${#dates.format(data.birthday, 'yyyy-MM-dd')}"
                                  placeholder="请选择出生日期" id="birthday"></label>

                </div>
                <div>
                    <span>性 别</span>
                    <label><input type="radio" th:checked="${data.sex eq null or data.sex eq 0}" value="0" name="sex">保密</label>
                    <label><input type="radio" th:checked="${data.sex eq 1}" value="1" name="sex">男</label>
                    <label><input type="radio" th:checked="${data.sex eq 2}" value="2" name="sex">女</label>
                </div>
                <div><span>手 机</span><input type="text" id="mobile" th:value="${data.mobile}"></div>
                <div><span>邮 箱</span><input type="text" id="email" th:value="${data.email}"></div>
                <button type="button" onclick="modify()">确认修改</button>
            </div>
        </form>
        <!-- 头像上传js -->
        <script type="text/javascript" src="/js/camera.js/hammer.min.js"></script>
        <script type="text/javascript" src="/js/camera.js/lrz.all.bundle.js"></script>
        <script type="text/javascript" src="/js/camera.js/iscroll-zoom-min.js"></script>
        <script type="text/javascript" src="/js/camera.js/PhotoClip.js"></script>
        <script>
            $(function () {
                laydate.render({
                    elem: '#birthday' //指定元素
                });
            });
            $("#btn").click(function () {
                $(".clipbg").fadeIn()
            })
            var clipArea = new PhotoClip("#clipArea", {
                size: [300, 300],//裁剪框大小
                outputSize: [0, 0],//打开图片大小，[0,0]表示原图大小
                file: "#file",
                ok: "#clipBtn",
                loadStart: function () { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
                    $(".loading").removeClass("displaynone");

                },
                loadComplete: function () {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
                    $(".loading").addClass("displaynone");

                },
                done: function (dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
                    $.post("/ajax/common/upload_blob", {base64file: dataURL}, function (d) {
                        if (d.code == 0) {
                            $("#headimg").css('background-image', 'url(' + d.data + ')');
                        } else {
                            alert("上传失败");
                        }
                    })
                    // console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
                    $(".clipbg").fadeOut()
                }
            });
            $(".back").click(function () {
                $(".clipbg").fadeOut()
            })

            function modify() {
                if (!window.confirm("确认修改用户信息")) {
                    return;
                }
                var username = $("#username").val();
                var email = $("#email").val();
                var mobile = $("#mobile").val();
                var nickName = $("#nickName").val();
                // var sex = $("#sex").val();
                var sex= $('input[name="sex"]:checked').map(function () {
                    return this.value;
                }).get().join(",");
                var birthdayStr = $("#birthday").val();
                // if (birthday==""){
                //     birthday=null;
                // }
                $.post("/ajax/center/modifyUserInfo", {
                    username: username,
                    email: email,
                    mobile: mobile,
                    nickName: nickName,
                    sex: sex,
                    birthdayStr: birthdayStr
                }, function (d) {
                    if (d.code == 0) {
                        layer.msg("更新成功");
                    } else {
                        layer.msg("更新失败");
                    }
                })
            }
        </script>
    </div>
</div>

</body>

</html>